<template>
	<view class="container">
		<mx-navbar :title="' '" :background="'transparent'"></mx-navbar>
		
		<view class="module">
			<image class="logo" src="/static/logo.png" mode="widthFix"></image>
			
			<view class="sub">
				宝藏跨境购 ｜ 品质新生活
			</view>
		</view>
		<view class="bottom">
			<button type="primary" size="default" class="login-btn" open-type="getPhoneNumber" lang="zh_CN"
				@getphonenumber="getPhone">
				手机号快捷登录
			</button>
		</view>
	</view>
</template>
 
<script setup>
	
	const {proxy} = getCurrentInstance()

	const login_code = ref('')
	onShow(async ()=> {
		let res = await uni.login()
		login_code.value = res.code
	})
	function getPhone(e) {
		let code = e.detail.code
		if(code) {
			login(code)
		} else {
			proxy.$toast('获取手机号失败')
		}
	}
	
	async function login(code) {
		let res = await proxy.$api('Login',{
			code,
			login: login_code.value
		})
		if(res.code == 0) {
			proxy.$store.token = res.data.token 
			proxy.$store.user_info = res.data.user
			user()
			proxy.$go('back')
		}
	}

	async function user() {
		let res = await proxy.$api('UserInfo',{}, false, false)
		if(res.code == 0) {
			proxy.$store.user_info = res.data.user
		}
	}
</script>

<style lang="scss" scoped>
	
	.container{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		// overflow: hidden;
		// background-image: url('');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
	}
	.module{
		width: 100%;
		text-align: center;
		padding-top: 100rpx;
		.logo{
			width: 400rpx;
			height: auto;
		}
		.sub{
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 50rpx;
		}
	}
	.bottom {
		width: 100%;
		position: absolute;
		bottom: 20%;
		left: 0;
		padding: 0 160rpx;

		.login-btn {
			width: 100%;
			border-radius: 50rem !important;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
			background-color: $main_color;
			image {
				width: 36rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}

		.row {
			.grid {
				width: 20%;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>